<template>
		<modal-container v-el:modal title="编辑" class="edit-modal">
		<form v-el:submitform @submit.prevent> 
			<div>
				<table class="table table-hover">
					<tbody>
							<tr>
								<td>机构编号</td>
								<td>
									<input type="text" class="form-control" :value="model.brhId" disabled  name="brhId">
								</td>
							</tr>
							<tr>
								<td>机构名称</td>
								<td>
									<input type="text" class="form-control" :value="model.brhName"  name="brhName" :maxlength="16">
								</td>
							</tr>								
							<tr>
								<td>机构地址</td>
								<td>
								  <input type="text" class="form-control" :value="model.brhAddress"  name="brhAddress" :maxlength="50"> 				
								</td>
							</tr>
							<tr>
								<td>邮政编码</td>
								<td>
								  <input type="text" class="form-control" :value="model.postCode"  name="postCode">				
								</td>
							</tr>
							<tr>
								<td>银联机构地区编码</td>
								<td>
								  <input type="text" class="form-control" :value="model.brhAreaCode"  name="brhAreaCode">				
								</td>
							</tr>																								
							<tr>
								<td>联系电话</td>
								<td>
									<input type="text" class="form-control" :value="model.telPhone" name="telPhone">
								</td>
							</tr>	
							<tr>
								<td>联系人</td>
								<td>
									<input type="text" class="form-control" :value="model.contactName" name="contactName">
								</td>
							</tr>															 		
					</tbody>
				</table>
			</div>
			<div class="modal-footer">
				<v-button type="submit" theme="primary" class="pull-left">确认</v-button>
				<v-button @click="hide">取消</v-button>
			</div>
		</form>
		</modal-container>	

</template>

<script>
	
	let serialize = require('form-serialize');
	 
	export default {
		props: {
			model: {
			  type: Object,
				default:{}
			}			
		},
		data:()=>({
			collection: {
				role: []
			}			
		}),
		methods: {
			  init() {
					$(this.$els.modal).modal("show");
				},
		  	hide() {
					$(this.$els.modal).modal("hide");
				},
				_selected(roleId) {		
					return (roleId == this.model.roleId);    				
				},
		    reload() {
					this.$dispatch("table-reload");
				},					
				submit(data) {
					let self = this;
					
					self.$post({
						url: "/api/v1" + projectName_Url + "/sys/brh/upd.html",
						data
					}).then(response => {
						let data = {
							title: "操作提示",
							content: "编辑操作成功"
						}
						Midway.alert(data);
						self.hide();
						self.reload();
					}, response => {

					});					
				}
	 },
	 ready() {
		 let self = this;
		 		 
			$(this.$els.submitform).submit(function () {
				return false;
			});				
		 $(self.$els.submitform).validate({
			 submitHandler() {
					let form = this.currentForm;	
				 
					$(form).find("input").each(function () {
						$(this).val($.trim($(this).val()));
					});				 
				 
					let _data = serialize(form, {
							hash: true,
						  disabled: true,
						  empty: true
					});	
				 
					_data = Object.assign(self.model, _data);				
	
				  self.submit(_data);				 
				 
			 },
				rules: {
					brhName: {
						required: true,
						maxlength: 16						
					},
					brhAddress: {
						required: true,
						maxlength: 50
					},
					brhAreaCode: {
						required: true,
						isCode: true,
						maxlength: 10						
					},	
					postCode: {
						required: true,
						isZipCode: true
					},					
					contactName: {
						required: true,
						maxlength: 10						
					},
					telPhone: {
						required: true,
						isTel: true						    
					}							
				},
				messages: {
					brhName: {
						required: "机构名为必填项",
				    maxlength: "机构名不多于16字"						
					},
					brhAddress: {
						required: "机构地址为必填项",
						maxlength: "机构地址不多于50字"						
					},
					brhAreaCode: {
						required: "银联机构地区编码为必填项",
						maxlength: "银联机构不多10位"						
					},
					postCode: {
						required: "邮编为必填项"
					},							
					contactName: {
						required: "联系人为必填项",
						maxlength: "不多于10字"						
					},
					telPhone: {
						required: "联系电话为必填项"
					}								
				}			 
		 });
	 }
}
</script>